<template>
	<div class="person">
		<h2>人员信息</h2>
		<h3>姓名：{{name}}</h3>
		<h3>年龄：{{age}}</h3>
		<h3>性别：{{gender}}</h3>
		<h3>爱好：{{hobby}}</h3>
		<h3>座驾：{{cars}}</h3>
	</div>
</template>

<script>
	export default {
		name:'Person',
		// 第一种接收prop的方式 —— 只是单纯的接收 ——————————————  用的多！
		// props:['name','age','','hobby','cars'],

		// 第二种接收prop的方式 —— 接收的同时限制数据的类型
		//#region 
		/* props:{
			name:String,
			age:Number,
			gender:String,
			hobby:Array,
			cars:Object
		} */
		//#endregion

		// 第三种接收prop的方式 —— 接收的同时：限制数据的类型、指定默认值、限制必要性
		// 通常来说，如果要封装一个项目里的通用组件，给其他人大量使用的时候，会采用第三种接收方式
		props:{
			name:{
				type:String, //限制类型
				default:'张三丰', //默认值
				required:true //必要性
			},
			age:{
				type:Number, //限制类型
				default:99, //默认值
				required:true //必要性
			},
			gender:{
				type:String, //限制类型
				default:'不男不女', //默认值
				required:true //必要性
			},
			hobby:{
				type:Array, //限制类型
				default(){ //默认值
					return ['学习','吃饭','睡觉']
				}, 
				required:true //必要性
			},
			cars:{
				type:Object, //限制类型
				default(){ //默认值
					return {c1:'奥拓'}
				}, 
				required:true //必要性
			},
		}
	}
</script>

<style>
	.person{
		background-color: skyblue;
		padding: 20px;
	}
</style>